<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-06-22 10:32:52
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-06-23 10:40:28
 * @FilePath: \nien-vue3-admin\src\views\index\orderException.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="app-container">
    <el-tabs v-model="activeName">
        <el-tab-pane
            :label="msgName"
            :name="msgName"
        >
            <customContainer ref="customContainerRef" :config="config" />
        </el-tab-pane>
    </el-tabs>
</div>
</template>

<script lang="ts" setup name="OrderException">
import { select,update } from '@/api/businessConfig/orderException'
// import OrderTable from './components/orderTable.vue'
import { ref,reactive,computed} from 'vue'
import {useRoute } from 'vue-router'
import { ElButton,ElMessage } from 'element-plus'

const {query} = useRoute()

const activeName = ref<string>(query.msgName as string || "超账期未结算")
// const orderNameList = ref(["超账期未结算", "已出单未推送(2天)", '已回款未核销(2天)'])

const msgName = computed<string>(() => query.msgName as string)

const customContainerRef = ref()

let columns = []

if(activeName.value === '超账期未结算'){
  columns = [
    { label: '付款天数', align: 'center', prop: 'billPaymentDay' },
    { label: '超账期天数', align: 'center', prop: 'morePaymentDays' },
  ]
}
if(activeName.value === '已出单未推送(2天)'){
  columns = [
    { label: '账单时间', align: 'center', prop: 'billTime' },
    { label: '账单付款时间', align: 'center', prop: 'billPaymentTime' },
  ]
}


const queryParams = reactive({
  pageSize: 10,
  pageNum: 1,
  exceptionType: query.msgType,
  isDispose: 0, 
  isBounced: query.isBounced ? query.isBounced : false 
})

const config = computed({
  get() {
    return {
      query: {
        fields: [ ],
        queryParams,
        formOption: {
          labelWidth: '150px'
        },
      },
      btns: [],
      table: {
        columns: [
          { type: 'selection', width: '55' },
          { label: '账单号', align: 'center', prop: 'exceptionId' },
          { label: '客户名称', align: 'center', prop: 'custName' },
          ...columns,
          {
            label: '操作',
            align: 'center',
            width: '300',
            fixed: 'right',
            render(h, { row }) {
              return [
                h(
                  ElButton,
                  {
                    text: true,
                    type: 'primary',
                    loading:row.loading,
                    onClick:  () => {
                      row.loading = true
                      update({id: row.id}).then(({code,msg}) => {
                        if(code === 200){
                            ElMessage.success(msg)
                            customContainerRef.value.getlist()
                        }
                      }).finally(()=>{
                          row.loading = false
                      })
                    },
                  },
                  {
                    default: () => '手动处理',
                  },
                )
              ]
            },
          },
        ],
        event: {
        },
      },
      api: select,
    }
  },
  set(val) {
    return val
  },
})

</script>

<style>
</style>